<template>
  <div>
    <div class="grid-container group flex_ali">
      <div class="grid-item-left">
        <span style="font-weight: bolder">项目/主项 :&nbsp;&nbsp;</span>
        <el-cascader
          id="el-cascader"
          :options="options"
          :props="props1"
          clearable
          placeholder="请选择项目或主项"
          v-model="unit"
          @change="unitChange"
          collapse-tags
          collapse-tags-tooltip
        />
      </div>
      <div v-if="unit.length > 0" class="grid-item-right">
        <el-upload
          accept="xlsx xls"
          :http-request="uploadExcel"
          class="upload-demo"
          action="#"
          style="display: inline-block"
          :show-file-list="false"
          :before-upload="beforeUpload"
        >
          <el-button type="primary" style="margin-right: 10px"
            >上传管道表</el-button
          >
        </el-upload>
        <el-upload
          accept="xlsx xls"
          :http-request="uploadKit"
          class="upload-demo"
          action="#"
          style="display: inline-block"
          :show-file-list="false"
        >
          <el-button
            type="primary"
            style="margin-right: 10px"
            v-if="tableData.length > 0"
            >上传试压包</el-button
          >
        </el-upload>
        <el-button type="primary" @click="exportKit" v-if="tableData.length > 0"
          >导出试压包模板</el-button
        >
        <el-button type="primary" @click="bulkKit2" v-if="tableData.length > 0"
          >组包</el-button
        >
        <el-button type="primary" @click="bulkKit" v-if="tableData.length > 0">
          添加到已有包</el-button
        >
        <el-button type="primary" @click="unpacked" v-if="tableData.length > 0"
          >解包</el-button
        >
        <el-button
          type="primary"
          @click="deleteDialogVisible = true"
          v-if="tableData.length > 0"
          >删除</el-button
        >
      </div>
    </div>
    <el-table
      ref="tableRef"
      @row-click="handleRowClick"
      :data="tableData"
      style="width: 100%"
      height="720px"
      @selection-change="handleSelectionChange"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
    >
      <el-table-column type="selection" width="40" header-align="center" />
      <el-table-column prop="kitName" label="试压包" width="100%"
        ><template #header>
          <div class="filter_item">
            <span>试压包</span>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div
                  class="icone"
                  :class="kitNameList.length == 0 ? '' : 'active'"
                >
                  <el-icon><Filter /></el-icon>
                </div>
              </template>
              <el-select-v2
                :teleported="false"
                v-model="kitNameList"
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                :options="kitNameOptions"
                placeholder="请选择"
                style="width: 100%"
                size="small"
              >
              </el-select-v2>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="unitName"
        label="主项"
        header-align="center"
        width="100px"
      >
        <template #default="props">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="props.row.unitName"
            placement="top-start"
          >
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ props.row.unitName }}
            </div>
          </el-tooltip>
        </template></el-table-column
      >
      <el-table-column prop="rev" label="版次" header-align="center">
      </el-table-column>
      <el-table-column
        prop="fluidCode"
        label="介质代号"
        header-align="center"
        width="110%"
      >
        <template #header>
          <div class="filter_item">
            <span>介质代号</span>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div
                  class="icone"
                  :class="fluidCodeList.length == 0 ? '' : 'active'"
                >
                  <el-icon><Filter /></el-icon>
                </div>
              </template>
              <el-select-v2
                :teleported="false"
                v-model="fluidCodeList"
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                :options="fluidCodeOptions"
                placeholder="请选择"
                style="width: 100%"
                size="small"
              >
              </el-select-v2>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        prop="lineNo"
        label="管线号"
        header-align="center"
      >
        <template #header>
          <div class="filter_item">
            <span>管线号</span>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div
                  class="icone"
                  :class="lineNoList.length == 0 ? '' : 'active'"
                >
                  <el-icon><Filter /></el-icon>
                </div>
              </template>
              <el-select-v2
                :teleported="false"
                v-model="lineNoList"
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                :options="fluidLineNoOptions"
                placeholder="请选择"
                style="width: 100%"
                size="small"
              >
              </el-select-v2>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="nps"
        label="公称直径"
        header-align="center"
        width="110%"
      >
        <template #header>
          <div class="filter_item">
            <span>公称直径</span>
            <el-popover :width="200" trigger="hover">
              <template #reference>
                <div class="icone" :class="npsList.length == 0 ? '' : 'active'">
                  <el-icon><Filter /></el-icon>
                </div>
              </template>
              <el-select-v2
                :teleported="false"
                v-model="npsList"
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                :options="npsOptions"
                placeholder="请选择"
                style="width: 100%"
                size="small"
              >
              </el-select-v2>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="pipeclass"
        label="管道等级"
        header-align="center"
        width="110%"
      >
        <template #header>
          <div class="filter_item">
            <span>管道等级</span>
            <filterCom
              :options="pipeclassOptions"
              @chooseItem="choosePipeClass"
            ></filterCom>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="insulation" label="绝热" header-align="center">
        <el-table-column prop="type" label="代号" header-align="center" />
        <el-table-column prop="thickness" label="厚度" header-align="center" />
      </el-table-column>
      <el-table-column prop="fromTo" label="起止点" header-align="center">
        <el-table-column
          prop="fromPoint"
          label="起点"
          header-align="center"
          width="120%"
        >
          <template #default="props">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="props.row.fromPoint"
              placement="top-start"
            >
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ props.row.fromPoint }}
              </div>
            </el-tooltip>
          </template></el-table-column
        >
        <el-table-column
          prop="toPoint"
          label="终点"
          header-align="center"
          width="120%"
          ><template #default="props">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="props.row.toPoint"
              placement="top-start"
            >
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ props.row.toPoint }}
              </div>
            </el-tooltip>
          </template></el-table-column
        >
      </el-table-column>
      <el-table-column
        prop="pidNo"
        label="管道仪表流程图号"
        header-align="center"
        width="150%"
      >
        <template #default="props">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="props.row.pidNo"
            placement="top-start"
          >
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ props.row.pidNo }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="operating" label="操作参数" header-align="center">
        <el-table-column
          prop="oprrationTemp"
          label="温度"
          header-align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="oprrationPress"
          label="压力"
          header-align="center"
        />
      </el-table-column>
      <el-table-column
        prop="design"
        label="设计参数"
        width="100%"
        header-align="center"
      >
        <el-table-column
          prop="designTemp"
          label="温度"
          width="100%"
          header-align="center"
        />
        <el-table-column
          prop="designPress"
          label="压力"
          width="100%"
          header-align="center"
        />
      </el-table-column>
      <el-table-column prop="paint" label="涂漆代号" width="100" />
      <el-table-column prop="pipespec" label="压管级别" width="100" />
      <el-table-column prop="pwht" label="焊后热处理" width="100" />
      <el-table-column prop="radTest" label="射线检测比例" width="120" />
      <el-table-column prop="pressTest" label="压力试验">
        <el-table-column prop="pressMedi" label="介质" width="120" />
        <el-table-column prop="pressure" label="压力" width="120" />
      </el-table-column>
      <el-table-column prop="leakTest" label="泄漏试验" width="100" />
      <el-table-column prop="fluidAndProperties" label="介质及物性">
        <el-table-column prop="phase" label="相态" width="120" />
        <el-table-column prop="toxicity" label="毒性" width="120" />
        <el-table-column prop="fireHazard" label="火灾危险性" width="120" />
        <el-table-column prop="fluidDescription" label="组分" width="200%">
          <template #default="props">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="props.row.fluidDescription"
              placement="top-start"
            >
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ props.row.fluidDescription }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="note" label="备注" width="200"
        ><template #default="props">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="props.row.note"
            placement="top-start"
          >
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ props.row.note }}
            </div>
          </el-tooltip>
        </template></el-table-column
      >
    </el-table>

    <el-row style="margin-top: 10px" justify="end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[50, 100, 150]"
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        background
      >
      </el-pagination>
    </el-row>

    <el-dialog
      v-model="dialogFormVisible"
      title="请选择试压包名称（组原有包）"
      width="28%"
    >
      <el-form>
        <el-form-item
          label-width="100"
          label="项目/主项"
          v-show="unitArr.length == 1"
          >{{ unitArr[0].split(".")[2] }}&nbsp;/&nbsp;{{
            unitArr[0].split(".")[3]
          }}
        </el-form-item>

        <el-form-item
          label-width="100"
          label="项目/主项"
          v-show="unitArr.length > 1"
        >
          <el-cascader
            style="width: 100%"
            :options="spliceOption"
            :props="props2"
            clearable
            placeholder=""
            v-model="kitUnit"
            @change="kitUnitChange"
            collapse-tags
            collapse-tags-tooltip
          />
        </el-form-item>

        <el-form-item label-width="100" label="试压包名称">
          <el-select
            v-model="kitName"
            style="width: 100%"
            filterable
            default-first-option
            :reserve-keyword="false"
            placeholder="选择原有试压包"
          >
            <el-option
              v-for="item in kitNameOptions2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <!-- <el-input v-model="kitName" autocomplete="off" /> -->
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSet"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="dialogFormVisible2"
      title="请输入试压包名称（组新包）"
      width="28%"
    >
      <el-form>
        <el-form-item
          label-width="100"
          label="项目/主项"
          v-show="unitArr.length == 1"
          >{{ unitArr[0].split(".")[2] }}&nbsp;/&nbsp;{{
            unitArr[0].split(".")[3]
          }}
        </el-form-item>

        <el-form-item
          label-width="100"
          label="项目/主项"
          v-show="unitArr.length > 1"
        >
          <el-cascader
            style="width: 100%"
            :options="spliceOption"
            :props="props2"
            clearable
            placeholder=""
            v-model="kitUnit"
            @change="kitUnitChange"
            collapse-tags
            collapse-tags-tooltip
          />
        </el-form-item>

        <el-form-item label-width="100" label="试压包名称">
          <el-input
            v-model="kitName"
            autocomplete="off"
            placeholder="请输入试压包名称"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取消</el-button>
          <el-button type="primary" @click="confirmSet2"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="deleteDialogVisible" title="Warning" width="30%" center>
      <div class="dialog-body">
        <span> 将会删除此主项的所有管线和试压包信息，是否继续？ </span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteLine"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import {
  getSAC,
  impLineList,
  getTable,
  setKit,
  unpack,
  getFilterOptions,
  deleteList,
  exportLineList,impKitList
} from "@/https/api/imc.js";
import { ElMessage, ElNotification } from "element-plus";
import filterCom from "../components/filter.vue";
const cellStyle = { height: "20px" };
const kitName = ref("");
const dialogFormVisible = ref(false);
const tableData = ref([]);
const unit = ref([]);
const deleteDialogVisible = ref(false);
watch(
  unit,
  () => {
    selectValue.value = unit.value;
    unitArr.value.length = 0;
    if (unit.value.length === 0) {
      tableData.value.length = 0;
      return;
    }
    for (let index = 0; index < unit.value.length; index++) {
      unitArr.value.push(unit.value[index][1]);
    }
    getFilterOptions({ params: unitArr.value }).then((res) => {
      fluidLineNoOptions.value = res.data.lineNoOptions.map((item) => {
        return { label: item ? item : "无", value: item };
      });
      npsOptions.value = res.data.npsOptions.map((item) => {
        return { label: item ? item : "无", value: item };
      });
      pipeclassOptions.value = res.data.pipeClassOptions.map((item) => {
        return { label: item ? item : "无", value: item ? item : "" };
      });
      kitNameOptions.value = res.data.kitOptions.map((item) => {
        return {
          label: item.kitName ? item.kitName : "无试压包",
          value: item.kitName,
        };
      });
      fluidCodeOptions.value = res.data.fluidCodeOptions.map((item) => {
        return { label: item ? item : "无", value: item };
      });
    });

    showTable();
  },
  { deeply: true }
);

const kitUnit = ref([]);
const beforeUpload = () => {
  if (unit.value.length === 0) {
    ElNotification({
      title: "请选择项目/主项",
      type: "warning",
      message: "请选择项目/主项",
    });
    return false;
  } else if (unit.value.length > 1) {
    ElNotification({
      title: "选择过多",
      type: "warning",
      message: "选中的主项大于1，请选择一个主项",
    });
    return false;
  }

  return true;
};
const unitArr = ref([]);
const kitNameList = ref([]);
watch(kitNameList, () => {
  showTable();
});
const fluidCodeList = ref([]);
watch(fluidCodeList, () => {
  showTable();
});
const lineNoList = ref([]);
watch(lineNoList, () => {
  showTable();
});
const npsList = ref([]);
watch(npsList, () => {
  showTable();
});
const pipeClassList = ref([]);
const kitNameOptions = ref([]);
const fluidCodeOptions = ref([]);
const fluidLineNoOptions = ref([]);
const npsOptions = ref([]);
const pipeclassOptions = ref([]);
const showTable = () => {
  getTable({
    params: unitArr.value,
    kitNameList: kitNameList.value,
    fluidCode: fluidCodeList.value,
    lineNo: lineNoList.value,
    nps: npsList.value,
    pipeClass: pipeClassList.value,
    pageSize: pageSize.value,
    pageNum: pageNum.value,
  }).then((res) => {
    tableData.value = res.data.records;
    total.value = res.data.total;
  });
};
//设置过滤器options的方法。columnName是属性名
// eslint-disable-next-line no-unused-vars

let selectValue = ref([]);
// eslint-disable-next-line no-unused-vars
const unitChange = (e) => {
  setTimeout(() => {
    var el_cascader_element = document.querySelector(
      ".el-cascader .el-cascader__tags .el-tag__content span"
    );

    if (document.querySelector(".el-cascader")) {
      if (e.length == 0) {
        document.querySelector(".el-cascader").style.width = "230px";
        return;
      }
      document.querySelector(".el-cascader").style.width = `${
        el_cascader_element.innerText.length * 15
      }px`;
    }
  });

  let arr = [
    ...new Set(
      unit.value.map((value) => {
        return value[0];
      })
    ),
  ];
  unit.value = unit.value.filter((v) => {
    return v[0] == arr[arr.length - 1];
  });
};
const kitProUid = ref("");
const kitUnitUid = ref("");
const kitUnitChange = () => {
  kitProUid.value = kitUnit.value[0];
  kitUnitUid.value = kitUnit.value[1];
};

const props1 = {
  checkStrictly: false,
  multiple: true,
};

watch();

const props2 = {
  checkStrictly: false,
  multiple: false,
};
var options = ref([]);
const getOptions = () => {
  getSAC().then((res) => {
    options.value = res.data;
  });
};
getOptions();

const headerCellStyle = {
  background: "#f2f2f2",
  color: "#1f2937",

  fontWeight: "bold",
  "text-align": "center",
};

// 文件上传
function getHttpUpload(data) {
  impLineList(data).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: "导入成功",
        type: "success",
      });
      showTable();
    } else {
      ElMessage({
        message: "导入失败",
        type: "error",
      });
    }
  });
}
// 试压包上传
function getKitUpload(data) {
  impKitList(data).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: "导入成功",
        type: "success",
      });
      showTable();
    } else {
      ElMessage({
        message: "导入失败",
        type: "error",
      });
    }
  });
}
let uploadFileItem = (uploadFile) => {
  let formData = new FormData();
  //传给后台接收的名字 file
  formData.append("file", uploadFile.file);
  formData.append("projectUid", unit.value[0][0]);
  formData.append("unitUid", unit.value[0][1]);
  getHttpUpload(formData);
};
// 试压包上传
let uploadKitFile = (uploadFile) => {
  let formData = new FormData();
  //传给后台接收的名字 file
  formData.append("file", uploadFile.file);
  formData.append("projectUid", unit.value[0][0]);
  formData.append("unitUid", unit.value[0][1]);
  getKitUpload(formData);
};
let uploadExcel = (uploadFile) => {
  uploadFileItem(uploadFile);
};
const listSelection = ref([]);
const ids = ref([]);
const handleSelectionChange = (val) => {
  listSelection.value = val;
};

let kitNameOptions2 = ref([]);
let spliceOption = ref([]);
const bulkKit = () => {
  if (listSelection.value.length == 0) {
    ElMessage({
      message: "请先选择管线",
      type: "warning",
    });
    return;
  }
  kitName.value = "";
  dialogFormVisible.value = true;
  getFilterOptions({ params: unitArr.value }).then((res) => {
    kitNameOptions2.value = res.data.kitOptions.map((item) => {
      return {
        label: item.kitName ? item.kitName : "无试压包",
        value: item.kitId,
      };
    });
    kitNameOptions2.value = kitNameOptions2.value.filter(
      (v) => v.label !== "无试压包"
    );
  });
  let fomaterArr = (obj, arr) => {
    let constructArr = () => {
      return arr.reduce((pre, [value, key]) => {
        let findArr = pre.find((item) => {
          return item[0] === value;
        });

        if (findArr) {
          findArr.push(key);
        } else {
          pre.push([value, key]);
        }

        return pre;
      }, []);
    };
    let arrF = constructArr();

    let opitonArrFinally = [];
    arrF.forEach((v) => {
      let itemArr = {};
      let childrenArr = [];
      v.forEach((item, index) => {
        if (index == 0) {
          itemArr = obj.find((i) => i.value == item);
        } else {
          childrenArr.push(itemArr.children.find((i) => i.value == item));
        }
      });
      itemArr.children = childrenArr;
      opitonArrFinally.push(itemArr);
    });

    return opitonArrFinally;
  };

  let arrSD = JSON.parse(JSON.stringify(selectValue.value));
  let arrCopy = JSON.parse(JSON.stringify(options.value));
  spliceOption.value = fomaterArr(arrCopy, arrSD);

  ids.value = listSelection.value.map((item) => item.id);
};

let dialogFormVisible2 = ref(false);
const bulkKit2 = () => {
  if (listSelection.value.length == 0) {
    ElMessage({
      message: "请先选择管线",
      type: "warning",
    });
    return;
  }

  let arr = listSelection.value.filter((v) => v.kitName);
  if (arr.length > 0) {
    ElMessage({
      message: "部分管线已有试压包，请选择其他管线",
      type: "warning",
    });
    return;
  }
  kitName.value = "";
  dialogFormVisible2.value = true;

  let fomaterArr = (obj, arr) => {
    let constructArr = () => {
      return arr.reduce((pre, [value, key]) => {
        let findArr = pre.find((item) => {
          return item[0] === value;
        });

        if (findArr) {
          findArr.push(key);
        } else {
          pre.push([value, key]);
        }

        return pre;
      }, []);
    };
    let arrF = constructArr();

    let opitonArrFinally = [];
    arrF.forEach((v) => {
      let itemArr = {};
      let childrenArr = [];
      v.forEach((item, index) => {
        if (index == 0) {
          itemArr = obj.find((i) => i.value == item);
        } else {
          childrenArr.push(itemArr.children.find((i) => i.value == item));
        }
      });
      itemArr.children = childrenArr;
      opitonArrFinally.push(itemArr);
    });

    return opitonArrFinally;
  };

  let arrSD = JSON.parse(JSON.stringify(selectValue.value));
  let arrCopy = JSON.parse(JSON.stringify(options.value));
  spliceOption.value = fomaterArr(arrCopy, arrSD);

  ids.value = listSelection.value.map((item) => item.id);
};

const confirmSet = () => {
  if (
    (kitName.value == "" || kitUnitUid.value == "") &&
    unitArr.value.length != 1
  ) {
    ElMessage({
      message: "请填写完整信息",
      type: "warning",
    });
    return;
  }
  if (unitArr.value.length == 1) {
    kitProUid.value = unit.value[0][0];
    kitUnitUid.value = unit.value[0][1];
  }

  let kitNameSend = kitNameOptions2.value.find(
    (item) => item.value == kitName.value
  ).label;

  setKit({
    kitName: kitNameSend,
    kitId: kitName.value,
    ids: ids.value,
    kitProj: kitProUid.value,
    kitUnit: kitUnitUid.value,
  }).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: "组包成功",
        type: "success",
      });
      dialogFormVisible.value = false;
      showTable();
    }
  });
};

const confirmSet2 = () => {
  if (
    (kitName.value == "" || kitUnitUid.value == "") &&
    unitArr.value.length != 1
  ) {
    ElMessage({
      message: "请填写完整信息",
      type: "warning",
    });
    return;
  }
  if (unitArr.value.length == 1) {
    kitProUid.value = unit.value[0][0];
    kitUnitUid.value = unit.value[0][1];
  }

  setKit({
    kitName: kitName.value,
    kitId: "",
    ids: ids.value,
    kitProj: kitProUid.value,
    kitUnit: kitUnitUid.value,
  }).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: "组包成功",
        type: "success",
      });
      dialogFormVisible2.value = false;
      showTable();
    } else {
      ElMessage({
        message: res.msg,
        type: "error",
      });
    }
  });
};

const unpacked = () => {
  if (listSelection.value.length == 0) {
    ElMessage({
      message: "请先选择管线",
      type: "warning",
    });
    return;
  }
  let arr = listSelection.value.filter((v) => !v.kitName);
  let arr2 = listSelection.value.filter((v) => v.kitName);
  if (arr.length == 0) {
    unpack({ ids: listSelection.value.map((item) => item.id) }).then((res) => {
      if (res.code == 200) {
        ElMessage({
          message: "解包成功",
          type: "success",
        });
      } else {
        ElMessage({
          message: "解包失败",
          type: "error",
        });
      }
      showTable();
    });
  } else if (arr.length > 0 && arr2.length > 0) {
    unpack({ ids: listSelection.value.map((item) => item.id) }).then((res) => {
      if (res.code == 200) {
        ElMessage({
          message: "有试压包编号的管线已解包成功",
          type: "success",
        });
      } else {
        ElMessage({
          message: "解包失败",
          type: "error",
        });
      }
      showTable();
    });
  } else if (arr.length > 0 && arr2.length == 0) {
    ElMessage({
      message: "该管线无试压包编号",
      type: "error",
    });
  }
};
const choosePipeClass = (val) => {
  pipeClassList.value = val;
  showTable();
};
const deleteLine = () => {
  deleteList({ unitUid: unit.value[0][1] }).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    } else {
      ElMessage({
        message: "删除失败",
        type: "error",
      });
    }
    deleteDialogVisible.value = false;
    showTable();
  });
};
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(50);
const handleSizeChange = (param) => {
  pageSize.value = param;
  showTable();
};
const handleCurrentChange = (param) => {
  pageNum.value = param;
  showTable();
};
let tableInstance;
const tableRef = ref(null);
onMounted(() => {
  tableInstance = tableRef.value;
});

const handleRowClick = (row) => {
  if (tableInstance) {
    // 直接调用 toggleRowSelection 方法切换当前行的选中状态
    tableInstance.toggleRowSelection(row);
  }
};
const exportKit = async () => {
  let eleArr = ref([]);
  for (let index = 0; index < unit.value.length; index++) {
    eleArr.value.push(unit.value[index][1]);
  }
  let res = await exportLineList({
    units: eleArr.value,
  });
  if (res.code === 200) {
    var x = new XMLHttpRequest();
    x.open("GET", `http://113.140.81.195:8090/apl${res.data}`, true);
    x.responseType = "blob";
    x.onload = function () {
      var url = window.URL.createObjectURL(x.response);
      var a = document.createElement("a");
      a.href = url;
      a.download = "试压包模板";
      a.click();
    };
    x.send();
  }
};
const uploadKit = (uploadFile) => {
  uploadKitFile(uploadFile)
};
</script>
<style lang="less" scoped>
/deep/.el-table .el-table__cell {
  padding: 4px 0 !important;
}

.el-table {
  border-bottom: none;
  border-right: none;
  margin: 0 auto;
}
::v-deep.el-table th {
  border: 1px solid rgb(222, 219, 219) !important;

  border-right: none !important;
  border-bottom: none !important;
  // border-left: none!important;
}

::v-deep.el-table th:nth-of-type(1) {
  border-left: none !important;
}
::v-deep.el-table tr td {
  border: 1px solid rgb(235, 235, 235);
  border-right: none !important;
  border-bottom: none !important;
}

::v-deep.el-table tr td:nth-of-type(1) {
  border-left: none !important;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 10px;
}
.group {
  margin-bottom: 1%;
}

.grid-item-left {
  margin-top: 10px;
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-self: start;
}

.grid-item-right {
  justify-self: end;
}
.grid-item-right {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
// .flex_ali{
//   display: flex;
//   align-items: center;
// }
.filter_item {
  display: flex;
  align-items: center;
  span {
    margin-right: 5px;
  }
}

/deep/ .el-dialog__body {
  padding: 10px !important;
}
/deep/ .el-dialog__footer {
  padding-top: 0 !important;
}

/deep/ .el-table__border-left-patch {
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  z-index: 3;
  position: absolute;
  background-color: transparent;
}

/deep/ .el-table--border .el-table__inner-wrapper::after,
.el-table--border::after,
.el-table--border::before,
.el-table__inner-wrapper::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 3;
}

.icone {
  display: flex;
  align-items: center;
  justify-content: center;
}
.active {
  color: rgb(24, 144, 255);
}
.dialog-body {
  display: block;
  text-align: center;
  font-weight: 800;
  margin-bottom: 5px;
  font-size: large;
}
</style>
